<template>
  <div class="baseUser">

    <!-- 按钮 -->
    <div class="btns">
      <!-- {{param}} -->
      <el-form label-width="40px" inline size="small">
        <el-button
          type="primary"
          size="mini"
          @click="toAddHandler"
          icon="el-icon-plus"
          >添加用户</el-button
        >
        <el-form-item label=" " label-width="10px" size="small">
          <el-input
            v-model="param.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>

        <el-select
          v-model="value"
          placeholder="请选择性别"
          size="small"
          @change="changeoption"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-form-item label-width="10px" label=" ">
          <el-input
            v-model="param.address"
            placeholder="请输入地址"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item size="small">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="loadbaseUsers"
            >查询</el-button
          >
          <el-button type="primary" @click="download" icon="el-icon-download">按用户名导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- /按钮 -->
    <!-- {{baseusers}} -->
    <!-- 表格 -->
    <div class="bg">
      <el-table size="small" :data="baseusers" max-height="500px">
        <el-table-column
          type="index"
          :index="1"
          label="序号"
          width="50px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
          width="100px"
          sortable
        ></el-table-column>

        <el-table-column
          label="角色"
          prop="rolename"
          align="center"
        ></el-table-column>

        <el-table-column
          label="姓名"
          prop="realname"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          label="性别"
          prop="gender"
          align="center"
          
          sortable
        ></el-table-column>
        <el-table-column
        label="生日"
        prop="birth"
        align="center"
        :formatter="dateFormat"
      ></el-table-column>
        <el-table-column
          label="email"
          prop="email"
          align="center"
          sortable
        ></el-table-column>
        <!-- <el-table-column
        label="内容"
        prop="autograph"
        align="center"
        
      ></el-table-column> -->
        <!-- <el-table-column
        label="is_free"
        prop="isFree"
        align="center"
      ></el-table-column> -->
        <el-table-column
          label="状态"
          prop="status"
          align="center"
          sortable
          effect="dark"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '正常' ? 'success' : 'info'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="telephone"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          label="地址"
          prop="address"
          align="center"
        ></el-table-column>
      
        <el-table-column label="操作" width="160px" align="center">
          <template v-slot="scope">
            <el-button size="mini" type="text" @click="set(scope.row)"
              >设置</el-button
            >
            <el-button size="mini" type="text" @click="del(scope.row)"
              >移除</el-button
            >
            <el-button size="mini" type="text" @click="toIntroduce(scope.row)">详情</el-button>
            <el-button size="mini" type="text" @click="editHandler(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /表格 -->
    <!-- 模态框 -->
    <el-dialog
      class="baseUser"
      title="设置角色"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="姓名">
          {{ form.realname }}
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.rolename" size="small">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
       
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="save">保 存</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post, del } from "@/utils/request";
import moment from "moment";
export default {
  // 页面数据
  data() {
    return {
      option: [],
      options: [
        {
          value: "女",
          label: "女",
        },
        {
          value: "男",
          label: "男",
        },
        {
          value: " ",
          label: "全部",
        },
      ],
      value: "",
      param: {},
      baseusers: [],
      form: {},
      dialogVisible: false,
    };
  },
  // 页面渲染的时候会调用的函数
  created() {
    this.loadbaseUsers();
    this.loadBaseRole();
  },
  // 所有的方法
  methods: {
    //时间戳改为时间格式
    dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY-MM-DD");
      // return moment(date).format("HH:mm:ss")
    },

    download(){
      window.location.href="http://121.196.106.124:8888/baseUser/download?username= "+this.param.username
    },
    //设置权限
    set(row) {
      this.form = row;
      this.dialogVisible = true;
    },

    //选择器
    changeoption(value) {
      if (value == " ") this.param.gender = "";
      else this.param.gender = value;
    },
    //保存提交
    save() {
      let url = "http://121.196.106.124:8888/baseUser/saveOrUpdate";
      post(url, this.form).then((resp) => {
        this.dialogVisible = false;
        this.$message({ type: "success", message: resp.message });
        this.loadbaseUsers();
      });
    },
    //修改
    editHandler(row) {
      this.$router.push({
        path: "/BaseRole/BaseUser_create",
        query: row,
      });
    },
    //详情
    toIntroduce(row){
      this.$router.push({
        path:"/BaseRole/BaseUser_introduce",
        query:row,

      })
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除此用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://121.196.106.124:8888/baseUser/deleteById";
        del(url, { id: row.id }).then((response) => {
          // 1. 提示
          this.$message({ type: "success", message: response.message });
          // 2. 刷新
          this.loadbaseUsers();
        });
      });
    },
    // false() {

    //   this.dialogVisible = false;
    // },

    loadbaseUsers() {
      let url = "http://121.196.106.124:8888/baseUser/query";
      get(url, this.param).then((resp) => {
        this.baseusers = resp.data;
      });
    },
    loadBaseRole() {
      let url = "http://121.196.106.124:8888/BaseRole/query";
      get(url).then((resp) => {
        this.option = resp.data;
      });
    },
    toAddHandler() {
      this.$router.push("/BaseRole/BaseUser_create");
    },
  },
};
</script>
<style scoped>
.btns {
  padding-top: 15px;
  padding-left: 20px;
}

.bg {
  padding-left: 10px;
  border: 1px solid rgb(241, 241, 247);
}
</style>